// os 模块获取cpu的核数
const os = require("os");
// nodejs模块用于处理路径问题
const path = require("path");
// 引入ESLintPlugin插件
const ESLintPlugin = require("eslint-webpack-plugin");
// 引入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 获取 cpu 核数
const threads = os.cpus().length;

module.exports = {
  // 入口   webpack打包的入口文件
  entry: "./src/main.js", // 相对路径:相对代码运行的目录,代码在最外层目录下运行
  // 输出
  output: {
    // 所有文件的输出路径
    // __dirname 当前文件的文件夹路径
    // path: path.resolve(__dirname, "../dist"), // 绝对路径
    // 注意:开发模式可以不用设置输出的目录
    path: undefined,
    // 入口文件的输出名称
    filename: "static/js/[name].js",
    // 给打包输出的其它文件
    chunkFilename: "static/js/[name].chunk.js",
    // 图片字体等，通过type：asset处理的资源
    assetModuleFilename: "static/media/[hash:10][ext][query]",
    // 自动清空上次打包资源  原理：在打包前将path整个目录进行清空
    // clean: true,
  },
  // loader 加载器
  module: {
    // loader 配置
    rules: [
      {
        // 每个文件只能被其中一个loader配置处理
        oneOf: [
          // CSS
          {
            test: /\.css$/, // 检测以.css结尾的文件
            use: [
              // 执行顺序，从右到左(从下到上)
              "style-loader", // 将js中css的通过创建style标签添加到html文件中生效
              "css-loader", // 将CSS样式编译成commonjs的模块到js中
            ],
          },
          // Less
          {
            test: /\.less$/,
            use: [
              "style-loader",
              "css-loader",
              "less-loader", // 将less编译成css
            ],
          },
          // Sass/Scss
          {
            test: /\.s[ac]ss$/,
            use: [
              "style-loader", // 将JS字符串生成style标签
              "css-loader", // 将CSS转化为 CommondJS 模块
              "sass-loader", // 将Sass编译成CSS
            ],
          },
          // Stylus
          {
            test: /\.styl$/,
            use: [
              "style-loader",
              "css-loader",
              "stylus-loader", // 将stylus文件编译成css文件
            ],
          },
          // 图片
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
              },
            },
            /* generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            }, */
          },
          // 字体文件和其它资源
          {
            test: /\.(ttf|woff|woff2|eot|svg|mp3|mp4|avi|ogg)$/,
            type: "asset/resource",
            /*  generator: {
              // 输出名称
              filename: "static/media/[hash:10][ext][query]",
            }, */
          },
          // babel
          {
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_modules文件夹下的文件 默认值
            // include:path.resolve(__dirname,"../src"),// 只处理src下的文件
            use: [
              {
                loader: "thread-loader", // 开启多线程编译
                options: {
                  works: threads, // 进程数量
                },
              },
              {
                loader: "babel-loader",
                options: {
                  // 可以设置在全局的 babel.config.js 文件中
                  // presets: ['@babel/preset-env'],
                  cacheDirectory: true, // 开启babel缓存
                  cacheCompression: false, // 关闭缓存文件压缩
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                },
              },
            ],
          },
        ],
      },
    ],
  },
  // plugins 插件
  plugins: [
    // ESLintPlugin 配置
    new ESLintPlugin({
      // 检测哪些文件
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true, // 开启缓存
      // 缓存文件路径
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/eslintcache"
      ),
      threads, // 开启多线程编译
    }),
    // HtmlWebpackPlugin 配置
    new HtmlWebpackPlugin({
      // template: 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 结构和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 会在dist目录下生成一个index.html文件
  ],
  // 开发服务器: 不会输出资源 在内存中编译打包的
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: false, // 是否自动打开浏览器
    hot: true, // 是否开启HRM(热模块替换) 默认为true
  },
  // mode 模式
  mode: "development",

  devtool: "cheap-module-source-map",
};
